<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>高级DOM操作</title>
</head>
<body>
    <table id="my-data">
        <thead>
            <tr>
                <th>
                    <a href="index.php?sort=name">Name</a>
                </th>
                <th>
                    <a href="index.php?sort=date">Date</a>
                </th>
            </tr>
        </thead>
        <tbody>
            <!--...-->
        </tbody>
    </table>
    <script>
        function ajaxRequest() {
            $(document).ready(function () {
                $('#my-data th a').click(function (e) {
                    e.preventDefault();
                    $('#my-data tbody').load($(this).attr('href'));
                });
            });
        }

        function wrapInner() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
            });
        }

        function sort() {
            var arr = [52, 97, 3, 62, 10, 63, 64, 1, 9, 3, 4];
            arr.sort();
            // 1, 10, 3, 4, 52, 62, 63, 64, 9, 97
            arr.sort(function (a, b) {
                if (a < b) {
                    return -2;
                }
                if (a > b) {
                    return 1;
                }
                return 0;
            });
            // 1, 3, 3, 4, 9, 10, 52, 62, 63, 64, 97
        }

        function columnsSort() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var column = $(this).index();
                    var rows = $table1.find('tbody > tr').get();
                    rows.sort(function (a, b) {
                        var keyA = $(a).children('td').eq(column).text();
                        keyA = $.trim(keyA).toUpperCase();
                        var keyB = $(b).children('td').eq(column).text();
                        keyB = $.trim(keyB).toUpperCase();
                        if (keyA < keyB) {
                            return -1;
                        }
                        if (keyA > keyB) {
                            return 1;
                        }
                        return 0;
                    });
                    $.each(rows, function (index, row) {
                        $table1.children('tbody').append(row);
                    })
                })
            });
        }

        function dataSort() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var column = $(this).index();
                    var rows = $table1.find('tbody > tr').each(function () {
                        var key = $(this).children('td').eq(column).text();
                        $(this).data('sortKey', $.trim(key).toUpperCase());
                    }).get();
                    rows.sort(function (a, b) {
                        var keyA = $(a).data('sortKey');
                        var keyB = $(b).data('sortKey');
                        if (keyA < keyB) {
                            return -1;
                        }
                        if (keyA > keyB) {
                            return 1;
                        }
                        return 0;
                    });
                    $.each(rows, function (index, row) {
                        $table1.children('tbody').append(row);
                    });
                });
            });
        }

        function inAdvanceCalculate() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var column = $(this).index();
                    var rows = $table1.find('tbody > tr').each(function () {
                        var $cell = $(this).children('td').eq(column);
                        var key = $cell.find('span.sort-key').text() + ' ';
                        key += $.trim($cell.text()).toUpperCase();
                        $(this).data('sortKey', key);
                    }).get();
                    rows.sort(function (a, b) {
                        var keyA = $(a).data('sortKey');
                        var keyB = $(b).data('sortKey');
                        if (keyA < keyB) {
                            return -1;
                        }
                        if (keyA > keyB) {
                            return 1;
                        }
                        return 0;
                    });
                    $.each(rows, function (index, row) {
                        $table1.children('tbody').append(row);
                    });
                });
            });
        }

        function compare() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .each(function () {
                        var keyType = this.className.replace(/^sort-/, '');
                        $(this).data('keyType', keyType);
                    })
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                var sortKeys = {
                    alpha: function ($cell) {
                        var key = $cell.find('span.sort-key').text() + ' ';
                        key += $.trim($cell.text()).toUpperCase();
                        return key;
                    },
                    numeric: function ($cell) {
                        var key = $cell.text().replace(/^[^\d.]*/, '');
                        key = parseFloat(key);
                        if (isNaN(key)) {
                            key = 0;
                        }
                        return key;
                    },
                    date: function ($cell) {
                        var key = Date.parse('1' + $cell.text());
                        return key;
                    }
                };
            });
        }

        function comparater() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .each(function () {
                        var keyType = this.className.replace(/^sort-/, '');
                        $(this).data('keyType', keyType);
                    })
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                var sortKeys = {
                    alpha: function ($cell) {
                        var key = $cell.find('span.sort-key').text() + ' ';
                        key += $.trim($cell.text()).toUpperCase();
                        return key;
                    },
                    numeric: function ($cell) {
                        var key = $cell.text().replace(/^[^\d.]*/, '');
                        key = parseFloat(key);
                        if (isNaN(key)) {
                            key = 0;
                        }
                        return key;
                    },
                    date: function ($cell) {
                        var key = Date.parse('1' + $cell.text());
                        return key;
                    }
                };
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var $header = $(this),
                        column = $(this).index(),
                        keyType = $header.data('keyType');
                    if (!$.isFunction(sortKeys[keyType])) {
                        return;
                    }
                    var rows = $table1.find('tbody > tr').each(function () {
                        var $cell = $(this).children('td').eq(column);
                        $(this).data('sortKey', sortKeys[keyType]($cell));
                    }).get();
                    rows.sort(function (a, b) {
                        var keyA = $(a).data('sortKey');
                        var keyB = $(b).data('sortKey');
                        if (keyA < keyB) {
                            return -1;
                        }
                        if (keyA > keyB) {
                            return 1;
                        }
                        return 0;
                    });
                    $.each(rows, function (index, row) {
                        $table1.children('tbody').append(row);
                    });
                });
            });
        }

        function ascendingOrdescending() {
            $(document).ready(function () {
                var $table1 = $('#t-1');
                var $headers = $table1.find('thead th').slice(1);
                $headers
                    .each(function () {
                        var keyType = this.className.replace(/^sort-/, '');
                        $(this).data('keyType', keyType);
                    })
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                var sortKeys = {
                    alpha: function ($cell) {
                        var key = $cell.find('span.sort-key').text() + ' ';
                        key += $.trim($cell.text()).toUpperCase();
                        return key;
                    },
                    numeric: function ($cell) {
                        var key = $cell.text().replace(/^[^\d.]*/, '');
                        key = parseFloat(key);
                        if (isNaN(key)) {
                            key = 0;
                        }
                        return key;
                    },
                    date: function ($cell) {
                        var key = Date.parse('1' + $cell.text());
                        return key;
                    }
                };
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var $header = $(this),
                        column = $(this).index(),
                        keyType = $header.data('keyType'),
                        sortDirection = 1;
                    if (!$.isFunction(sortKeys[keyType])) {
                        return;
                    }
                    if ($header.hasClass('sorted-asc')) {
                        sortDirection = -1;
                    }
                    var rows = $table1.find('tbody > tr').each(function () {
                        var $cell = $(this).children('td').eq(column);
                        $(this).data('sortKey', sortKeys[keyType]($cell));
                    }).get();
                    rows.sort(function (a, b) {
                        var keyA = $(a).data('sortKey');
                        var keyB = $(b).data('sortKey');
                        if (keyA < keyB) {
                            return -sortDirection;
                        }
                        if (keyA > keyB) {
                            return sortDirection;
                        }
                        return 0;
                    });
                    $headers.removeClass('sorted-asc sorted-desc');
                    $header.addClass(sortDirection == 1 ? 'sorted-asc' : 'sorted-desc');
                    $.each(rows, function (index, row) {
                        $table1.children('tbody').append(row);
                    });
                });
            });
        }

        function data() {
            $(document).ready(function () {
                var $table2 = $('#t-2');
                var $headers = $table2.find('thead th').slice(1);
                $headers
                    .wrapInner('<a href="#"></a>')
                    .addClass('sort');
                var rows = $table2.find('tbody > tr').get();
                $headers.on('click', function (e) {
                    e.preventDefault();
                    var $header = $(this),
                        sortKey = $header.data('sort').key,
                        sortDirection = 1;
                    if ($header.hasClass('sorted-asc')) {
                        sortDirection = -1;
                    }
                    rows.sort(function (a, b) {
                        var keyA = $(a).data('book')[sortKey];
                        var keyB = $(b).data('book')[sortKey];
                        if (keyA < keyB) {
                            return -sortDirection;
                        }
                        if (keyA > keyB) {
                            return sortDirection;
                        }
                        return 0;
                    });
                    $headers.removeClass('sorted-asc sorted-desc');
                    $header.addClass(sortDirection == 1 ? 'sorted-asc' : 'sorted-desc');
                    $.each(rows, function (index, row) {
                        $table2.children('tbody').append(row);
                    });
                });
            });
        }

        function JSON() {
            function buildRow(row) {
                var authors = [];
                $.each(row.authors, function (index, auth) {
                    authors[index] = auth.first_name + ' ' + auth.last_name;
                });
                var html = '<tr>';
                html += '<td><img src="images/' + row.img + '"></td>';
                html += '<td>' + row.title + '</td>';
                html += '<td>' + authors.join(', ') + '</td>';
                html += '<td>' + row.published + '</td>';
                html += '<td>' + row.price + '</td>';
                html += '</tr>';
                return html;
            }

            function buildRows(rows) {
                var allRows = $.map(rows, buildRow);
                return allRows.join('');
            }
        }

        function getJSON() {
            function buildRow(row) {
                var authors = [];
                $.each(row.authors, function (index, auth) {
                    authors[index] = auth.first_name + ' ' + auth.last_name;
                });
                var html = '<tr>';
                html += '<td><img src="images/' + row.img + '"></td>';
                html += '<td>' + row.title + '</td>';
                html += '<td>' + authors.join(', ') + '</td>';
                html += '<td>' + row.published + '</td>';
                html += '<td>' + row.price + '</td>';
                html += '</tr>';
                return html;
            }

            function buildRows(rows) {
                var allRows = $.map(rows, buildRow);
                return allRows.join('');
            }

            $.getJSON('books.json', function (json) {
                $(document).ready(function () {
                    var $table3 = $('#t-3');
                    $table3.find('tbody').html(buildRows(json));
                });
            });
        }

        function sortJSON() {
            function prepRows(rows) {
                $.each(rows, function (i, row) {
                    var authors = [],
                        authorsForamtted = [];
                    rows[i].titleFormatted = row.title;
                    rows[i].title = row.title.toUpperCase();
                    $.each(row.authors, function (j, auth) {
                        authors[j] = auth.last_name + ' ' + auth.first_name;
                        authorsForamtted[j] = auth.first_name + ' ' + auth.last_name;
                    });
                    rows[i].authorsFormatted = authorsForamtted.join(', ');
                    rows[i].authors = authors.join(' ').toUpperCase();
                });
                return rows;
            }
        }

        function getSortJSON() {
            function prepRows(rows) {
                $.each(rows, function (i, row) {
                    var authors = [],
                        authorsForamtted = [];
                    rows[i].titleFormatted = row.title;
                    rows[i].title = row.title.toUpperCase();
                    $.each(row.authors, function (j, auth) {
                        authors[j] = auth.last_name + ' ' + auth.first_name;
                        authorsForamtted[j] = auth.first_name + ' ' + auth.last_name;
                    });
                    rows[i].authorsFormatted = authorsForamtted.join(', ');
                    rows[i].authors = authors.join(' ').toUpperCase();
                });
                return rows;
            }

            function buildRow(row) {
                var html = '<tr>';
                html += '<td><img src="images/' + row.img + '"></td>';
                html += '<td>' + row.titleFormatted + '</td>';
                html += '<td>' + row.authorsFormatted + '</td>';
                html += '<td>' + row.published + '</td>';
                html += '<td>' + row.price + '</td>';
                html += '</tr>';
                return html;
            }

            function buildRows(rows) {
                var allRows = $.map(rows, buildRow);
                return allRows.join('');
            }

            $.getJSON('books.json', function (json) {
                $(document).ready(function () {
                    var $table3 = $('#t-3');
                    var rows = prepRows(json);
                    $table3.find('tbody').html(buildRows(rows));
                });
            });
        }

        function buildSortJSON() {
            function prepRows(rows) {
                $.each(rows, function (i, row) {
                    var authors = [],
                        authorsForamtted = [];
                    rows[i].titleFormatted = row.title;
                    rows[i].title = row.title.toUpperCase();
                    $.each(row.authors, function (j, auth) {
                        authors[j] = auth.last_name + ' ' + auth.first_name;
                        authorsForamtted[j] = auth.first_name + ' ' + auth.last_name;
                    });
                    rows[i].authorsFormatted = authorsForamtted.join(', ');
                    rows[i].authors = authors.join(' ').toUpperCase();
                });
                return rows;
            }

            function buildRow(row) {
                var html = '<tr>';
                html += '<td><img src="images/' + row.img + '"></td>';
                html += '<td>' + row.titleFormatted + '</td>';
                html += '<td>' + row.authorsFormatted + '</td>';
                html += '<td>' + row.published + '</td>';
                html += '<td>' + row.price + '</td>';
                html += '</tr>';
                return html;
            }

            function buildRows(rows) {
                var allRows = $.map(rows, buildRow);
                return allRows.join('');
            }

            $.getJSON('books.json', function (json) {
                $(document).ready(function () {
                    var $table3 = $('#t-3');
                    var rows = prepRows(json);
                    $table3.find('tbody').html(buildRows(rows));
                    var $headers = $table3.find('thead th').slice(1);
                    $headers
                        .wrapInner('<a href="#"></a>')
                        .addClass('sort');
                    $headers.on('click', function (e) {
                        e.preventDefault();
                        var $header = $(this),
                            sortKey = $header.data('sort').key,
                            sortDirection = 1;
                        if ($header.hasClass('sorted-asc')) {
                            sortDirection = -1;
                        }
                        rows.sort(function (a, b) {
                            var keyA = a[sortKey];
                            var keyB = b[sortKey];
                            if (keyA < keyB) {
                                return -sortDirection;
                            }
                            if (keyA > keyB) {
                                return sortDirection;
                            }
                            return 0;
                        });
                        $headers.removeClass('sorted-asc sorted-desc');
                        $header.addClass(sortDirection == 1 ? 'sorted-asc' : 'sorted-desc');
                        $table3.children('tbody').html(buildRows(rows));
                    });
                });
            });
        }

        function createElements() {
            $(document).ready(function () {
                $('table').each(function (index) {
                    var $table = $(this);
                    $('<h3></h3>', {
                        id: 'table-title-' + index,
                        'class': 'table-title',
                        text: 'Table ' + (index + 1),
                        data: { 'index': index },
                        click: function (e) {
                            e.preventDefault();
                            $table.fadeToggle();
                        },
                        css: { glowColor: '#00ff00' }
                    }).insertBefore($table);
                });
            });
        }

        function cssHooks() {
            (function ($) {
                var div = document.createElement('div');
                $.support.textShadow = div.style.textShadow === '';
                $.support.filter = div.style.filter === '';
                div = null;
                if ($.support.textShadow) {
                    $.cssHooks.glowColor = {
                        set: function (elem, value) {
                            if (value == 'none') {
                                elem.style.textShadow = '';
                            } else {
                                elem.style.textshad = '0 0 2px ' + value;
                            }
                        }
                    };
                } else {
                    $.cssHooks.glowColor = {
                        set: function (elem, value) {
                            if (value == 'none') {
                                elem.style.filter = '';
                            } else {
                                elem.style.zoom = 1;
                                elem.style.filter =
                                    'progid:DXImageTransform.Microsoft' +
                                    '.Glow(Strength=2, Color=' + value + ');';
                            }
                        }
                    };
                }
            })(jQuery);
        }
    </script>
</body>
</html>